<template>
  <div class="card">
    <div class="header">
      <div class="title">新建角色</div>
    </div>

    <el-row>
      <el-col :span="12" :offset="6">
        <div class="form-title">
          基本信息
        </div>
        <el-form size="mini" label-width="100px" :model="formData.role" :rules="rules" ref="ruleForm">
          <el-form-item
            label="角色名称："
            required
            prop="roleName"
          >
            <el-input
              v-model="formData.role.roleName"
              :disabled="isPreview()"
              :readonly="isPreview()"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="角色描述："
            required
            prop="roleDsc"
          >
            <el-input
              v-model="formData.role.roleDsc"
              type="textarea"
              resize="none"
              :rows="4"
              :disabled="isPreview()"
              :readonly="isPreview()"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="12" :offset="6">
        <div class="form-title">
          权限分配
        </div>
        <div>
          <el-tree
            :props="props"
            :data="allPowers"
            node-key="powerId"
            :default-expanded-keys="['1','4']"
            :default-checked-keys="formData.role.powerIds"
            show-checkbox
            ref="roleTree"
            @check-change="handleCheckChange">
          </el-tree>
        </div>
      </el-col>

      <el-col :span="24" class="back-bottom">
        <el-button type="primary" size="mini" v-if=!isPreview() @click="onSubmit">确定</el-button>
        <el-button size="mini" @click="goBack()">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'rolePreview',
    data () {
      const self = this
      return {
        formData: {
          role: {
            roleName: '',
            roleDsc: '',
            powerIds: []
          },
          powerList: []
        },
        rules: {
          roleName: [
            {required: true, message: '请输入角色名称', trigger: 'blur'}
          ],
          roleDsc: [
            {required: true, message: '请输入角色描述', trigger: 'blur'}
          ]
        },
        allPowers: [],
        props: {
          label: 'powerName',
          children: 'powerList',
          disabled: function (data, node) {
            return self.isPreview()
          }
        }
      }
    },
    mounted () {
      if (this.$route.query.id) {
        this.fetchDetail()
      }
      this.fetchPowerList()
    },
    methods: {
      fetchDetail () {
        const self = this
        const id = this.$route.query.id
        self.$get(`/api/role/findOneByRoleId/${id}`, {
          loading: true
        }).then(res => {
          self.formData = res
        })
      },
      isPreview () {
        return this.$route.query.preview == 1
      },
      fetchPowerList () {
        const self = this
        self.$get('/api/role/findAllPower').then(res => {
          self.allPowers = res
        })
      },
      handleCheckChange (data, checked, indeterminate) {
        //debugger
        this.formData.role.powerIds = this.$refs['roleTree'].getCheckedKeys(true)
      },
      onSubmit () {
        const self = this
        const id = this.$route.query.id
        const uri = id ? '/api/role/update' : '/api/role/add'
        self.$refs['ruleForm'].validate((valid) => {
          if (self.formData.role.powerIds.length) {
            if (valid) {
              this.formData.role.powerIds = this.$refs['roleTree'].getCheckedKeys(true)
              self.$post(uri, {
                roleId: self.formData.role.roleId,
                roleName: self.formData.role.roleName,
                roleDsc: self.formData.role.roleDsc,
                pwoerIds: self.formData.role.powerIds.join(',')
              }).then(res => {
                self.$message.success('保存成功')
                self.goBack()
              })
            }
          } else {
            self.$message.warning('请选择权限')
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
   @import '../../assets/style/base/themeColor';
  .card {
    padding: 0 20px;
    background: #fff;
    height: 100%;
    overflow: scroll;

    .header {
      border-bottom: 1px solid #f3f3f3;
      padding: 10px 0;
      margin-bottom: 20px;
      font-size: 14px;
    }

    .form-title {
      border-left: 2px solid @themeColor;
      font-size: 13px;
      padding: 2px 5px;
      margin-bottom: 20px;
    }

    .back-bottom {
      border-top: 1px solid #f3f3f3;
      padding: 20px 0;
      text-align: center;
    }
  }
</style>
